<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入vue的js--%>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <%--引入element的js--%>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <%--引入elementui的样式--%>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">

    <el-button @click="handle" type="primary" size="small">修复图书</el-button>
    <el-button @click="handle2" type="primary" size="small">清除图书</el-button>
<!-----损坏的图书信息------>
<el-table
        :data="damageBookData"
        border
        style="width: 51%">
    <el-table-column
            prop="bookId"
            width="120px"
            label="编号"
    >
    </el-table-column>
    <el-table-column
            prop="bookName"
            width="120px"
            label="图书名字"
    >

    </el-table-column>
    <el-table-column
            prop="booktype.booktypes"
            width="120px"
            label="图书类型"
    >

    </el-table-column>
    <el-table-column
            prop="damageSum"
            width="120px"
            label="损坏数量"
    >
    </el-table-column>
    <el-table-column
            prop="repairCount"
            width="120px"
            label="修复数量"
    >
    </el-table-column>
    <el-table-column
            prop="clearCount"
            width="120px"
            label="清除数量"
    >
    </el-table-column>
</el-table>

    <!-------处理损坏的图书----------->
    <el-dialog
            title="处理损坏图书"
            :visible.sync="dialogVisible"
            width="80%"
           >
        <el-table
                ref="multipleTable"
                :data="handleBookData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    width="120px"
                    label="编号"
            >
            </el-table-column>
            <el-table-column
                    prop="book.bookName"
                    width="120px"
                    label="图书名字"
            >

            </el-table-column>
            <el-table-column
                    prop="booktype.booktypes"
                    width="120px"
                    label="图书类型"
            >

            </el-table-column>
            <el-table-column
                    prop="damagecount"
                    width="120px"
                    label="损坏数量"
            >
            </el-table-column>

            <el-table-column
                    v-if="flg2"
                    label="清除数量"
                    width="120"
                    prop="clearCount"
            >
                <template slot-scope="scope">
                    <el-input v-model="clearCount[scope.row.id]" placeholder="清除数量"
                              @change="handleChange(scope.row.id,scope.row.damagecount)"></el-input>
                </template>
            </el-table-column>

            <el-table-column
                    v-if="flg"
                    label="修复数量"
                    width="120"
                    prop="repairCount"

            >
                <template slot-scope="scope">
                    <el-input v-model="repairCount[scope.row.id]" placeholder="修复数量"
                              @change="handleChange2(scope.row.id,scope.row.damagecount)"></el-input>
                </template>
            </el-table-column>


        </el-table>
        <!--分页-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current2"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize2"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total2">
        </el-pagination>

    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button v-if="flg" type="primary" @click="commit">修复</el-button>
    <el-button v-if="flg2" type="primary" @click="commit2">清除</el-button>
  </span>
    </el-dialog>


    <!--分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>




</div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            current: 1,
            pageSize: 5,
            total: 0,
            damageBookData:[],
            dialogVisible:false,
            current2:1,
            pageSize2:5,
            total2:0,
            handleBookData:[],
            clearCount:{},
            repairCount:{},
            books:[],
            flg:false,
            flg2:false,





        },
        created() {
            this.loadDamageBook()
        },
        methods: {

            loadDamageBook(){
              axios.get("/book/selectAll/"+this.current+"/"+this.pageSize).then(res=>{
                  if(res.data.code===200) {
                      this.damageBookData = res.data.data.list
                      this.total = res.data.data.total
                  }
              })
            },

            handleSizeChange(val) {
                this.pageSize = val;
                this.loadDamageBook();
            },

            handleCurrentChange(val) {
                this.current = val;
                this.loadDamageBook();
            },


            //显示处理图书弹窗
            handleBook(){
                axios.get("/verifyBook/searchAll/"+this.current2+"/"+this.pageSize2).then(res=>{
                    if(res.data.code===200) {
                        this.handleBookData= res.data.data.list
                        for (let x of this.handleBookData){
                            x.damagecount=x.damagecount-x.clearCount-x.repairCount
                        }
                        this.total2 = res.data.data.total
                    }
                })
                this.dialogVisible=true;
            },

            handle(){
              this.flg=true
              this.flg2=false
              this.handleBook()
            },
            handle2(){
                this.flg2=true
                this.flg=false
                this.handleBook()
            },





            handleSelectionChange(val) {
                this.multipleSelection = val;
            },


            handleChange(id, counts) {
                if (this.clearCount[id] != null && this.clearCount[id] != '') {
                    if (this.clearCount[id] <= counts && this.clearCount[id] >= 0) {
                        this.$set(this.clearCount, [id],this.clearCount[id])
                    } else {
                        this.$set(this.clearCount, [id], '')
                        this.$message({
                            message: '输入数量有误',
                            type: 'warning'
                        });
                    }
                }
            },

            handleChange2(id, counts) {
                if (this.repairCount[id] != null && this.repairCount[id] != '') {
                    if (this.repairCount[id] <= counts && this.repairCount[id] >= 0) {
                        this.$set(this.repairCount, [id],this.repairCount[id])
                    } else {
                        this.$set(this.repairCount, [id], '')
                        this.$message({
                            message: '输入数量有误',
                            type: 'warning'
                        });
                    }
                }
            },




            commit(){
                if(this.multipleSelection===undefined){
                    this.$message({
                        message: '请选择要提交校验书籍！',
                        type: 'warning'
                    });
                    return;
                }

                for (let x of this.multipleSelection) {
                    let book={
                        id:x.id,
                        bookId:x.bookid,
                        repairCount:this.repairCount[x.id],
                        status:0
                    }
                    if(x.damagecount==book.repairCount){
                        book.status=1
                    }
                    this.books.push(book)

                }

                axios.post("/verifyBook/updateRepairCount",this.books).then(res=>{
                    if(res.data.code===200){
                        this.$message.success(res.data.msg);
                        this.$refs.multipleTable.clearSelection();
                        this.books=[]
                        this.dialogVisible=false;
                        this.loadDamageBook()
                    }
                })
            },

            commit2(){
                if(this.multipleSelection===undefined){
                    this.$message({
                        message: '请选择要提交校验书籍！',
                        type: 'warning'
                    });
                    return;
                }
                for (let x of this.multipleSelection) {
                    let book={
                        id:x.id,
                        bookId:x.bookid,
                        clearCount:this.clearCount[x.id],
                        status:0
                    }
                    if(x.damagecount==book.clearCount){
                        book.status=1
                    }
                    this.books.push(book)
                    console.log("=======this.multipleSelection========")
                    console.log(this.multipleSelection)
                    console.log("==============")
                    console.log(this.books)

                }


                axios.post("/verifyBook/updateClearCount",this.books).then(res=>{
                    if(res.data.code===200){
                        this.$message.success(res.data.msg);
                        this.$refs.multipleTable.clearSelection();
                        this.books=[]
                        this.dialogVisible=false;
                        this.loadDamageBook()
                    }
                })

            }



        }
    })
</script>
</html>
